<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>出库审核</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <el-button @click="refresh" type="success" icon="el-icon-refresh">刷新</el-button>
    <el-table
            :data="warehouseInfo"
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center'}"
            style="width: 100%">
        <el-table-column
                fixed
                prop="outLibray.cid"
                label="出库编号">
        </el-table-column>
        <el-table-column
                prop="outstaffName"
                label="出库人">
        </el-table-column>
        <el-table-column
                prop="outLibray.outtime"
                label="出库时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="outLibray.outmethod"
                label="出库方式"
                width="90">
            <template slot-scope="scope">
                <el-tag
                        hit
                        :type="scope.row.outLibray.outmethod==1?'success':scope.row.outLibray.outmethod==2?'':'warning'"
                        effect="dark">
                    {{ scope.row.outLibray.outmethod==1?'零售出库':scope.row.outLibray.outmethod==2?'批量出库':'平掉出库'
                    }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="outLibray.examstate"
                label="出库状态"
                width="90">
            <template slot-scope="scope">
                <el-tag
                        hit
                        :type="scope.row.outLibray.examstate==1?'warning':scope.row.outLibray.examstate==2?'success':'danger'"
                        effect="dark">
                    {{ scope.row.outLibray.examstate==1?'待审核':scope.row.outLibray.examstate==2?'审核通过':'审核驳回'
                    }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                label="所属分店"
                width="140">
        </el-table-column>
        <el-table-column
                label="详情"
                width="150">
            <template slot-scope="scope">
                <el-button @click="getOutInfoByCid(scope.row.cid)" size="medium" type="primary">详细信息</el-button>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="180">
            <template slot-scope="scope">
                <div v-if="scope.row.outLibray.examstate == 1">
                    <el-button @click="warehouseSuccess(scope.row)" size="medium" type="primary">通过</el-button>
                    <el-button @click="rejected(scope.row)" size="medium" type="danger">驳回</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <%--分页组件--%>
    <el-pagination
            @size-change="warehouseSizeChange"
            @current-change="warehouseCurrentChange"
            :current-page="warehousePage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="warehousePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="warehouseTotal">
    </el-pagination>

    <%--详细信息弹出层--%>
    <el-dialog
            title="出库详情"
            :visible.sync="detailsVisible"
            width="80%">
        <el-table
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :data="detailsInfo"
                stripe
                style="width: 100%">
            <el-table-column prop="xid" label="出库详情ID"></el-table-column>
            <el-table-column prop="goods.goodsname" label="商品名"></el-table-column>
            <el-table-column prop="num" label="出库数量"></el-table-column>
            <el-table-column prop="goods.cprice" label="售价"></el-table-column>
            <el-table-column prop="total" label="总价"></el-table-column>
        </el-table>
        <el-pagination
                @size-change="detailsSizeChange"
                @current-change="detailsCurrentChange"
                :current-page="detailsPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="detailsPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="detailsTotal">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

    <%--驳回操作弹出层--%>
    <el-dialog
            title="出库驳回"
            :visible.sync="rejectedVisible"
            width="40%">
        <el-input v-model="rejectForm.remarks" placeholder="请输入内容"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="rejectedVisible = false">取 消</el-button>
            <el-button type="primary" @click="rejectConfirm">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            warehouseInfo: [],//出库审核的数据
            warehousePage: 1,//出库审核的页码
            warehousePageSize: 5,//出库审核每页最大数
            warehouseTotal: 0,//出库审核的条数

            /*出库详细信息数据*/
            detailsInfo: [],//出库详情信息数据
            detailsPage: 1,//出库详情的页码
            detailsPageSize: 5, //每页最大数
            detailsTotal: 0,//总条数
            detailsVisible: false,//出库详情对话框
            detailsCid: undefined,//选择的cid

            rejectedVisible: false,//驳回操作的对话框
            rejectForm: {
                remarks: '',//驳回信息
                outLibray: {}
            },//驳回信息
        },
        created() {
            /*初始化出库审核的数据*/
            this.initOutLibrayInfo();
        },
        methods: {
            /*获取出库审核的数据*/
            initOutLibrayInfo() {
                axios.get('/outLibray/getWarehouseInfo', {
                    params: {
                        page: this.warehousePage,
                        pageSize: this.warehousePageSize
                    }
                }).then(res => {
                    this.warehouseInfo = res.data.data.rows;
                    this.warehouseTotal = res.data.data.total;
                })
            },
            /*修改出库审核每页最大数*/
            warehouseSizeChange(val) {
                this.warehousePageSize = val;
                this.initOutLibrayInfo();
            },
            /*修改出库审核当前页码*/
            warehouseCurrentChange(val) {
                this.warehousePage = val;
                this.initOutLibrayInfo();
            },
            /*获取出库详细信息*/
            initDetailsInfo(cid) {
                axios.get('/outLibray/getOutInfoByCid', {
                    params: {
                        cid: cid,
                        page: this.detailsPage,
                        pageSize: this.detailsPageSize
                    }
                }).then(res => {
                    this.detailsInfo = res.data.data.rows;
                    this.detailsTotal = res.data.data.total;
                })
            },
            getOutInfoByCid(cid) {
                //打开对话框
                this.detailsVisible = true;
                this.initDetailsInfo(cid);
                this.detailsCid = cid;
            },
            /*出库详情修改展示数量*/
            detailsSizeChange(val) {
                this.detailsPageSize = val;
                this.initDetailsInfo(this.detailsCid);
            },
            /*出库详情修改当前页*/
            detailsCurrentChange(val) {
                this.detailsPage = val;
                this.initDetailsInfo(this.detailsCid);
            },

            /*审核通过*/
            warehouseSuccess(row) {
                let outLibray = row.outLibray;
                outLibray.examstate = 2;
                axios.post('/outLibray/warehouseAudit', outLibray).then(res => {
                    console.log(res)
                    if (res.data.code === 202) {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    } else if (res.data.code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('系统出现异常，请联系管理员解决!');
                    }
                    this.initOutLibrayInfo();
                })
            },
            /*出库驳回*/
            rejected(row) {
                let outLibray = row.outLibray;
                outLibray.examstate = 3;
                this.rejectForm.outLibray = outLibray;
                this.rejectedVisible = true;
            },
            /*出库驳回确定*/
            rejectConfirm() {
                this.rejectedVisible = false;
                this.rejectForm.outLibray.remarks = this.rejectForm.remarks;
                axios.post('/outLibray/warehouseAudit', this.rejectForm.outLibray).then(res => {
                    if (res.data.code === 202) {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    } else if (res.data.code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('系统出现异常，请联系管理员解决!');
                    }
                    this.initOutLibrayInfo();
                    this.rejectForm.outLibray = {};
                    this.rejectForm.remarks = '';
                })
            },
            /*页面刷新*/
            refresh() {
                this.warehousePage = 1;
                this.warehousePageSize = 5;
                this.initOutLibrayInfo();
            }
        }
    })
</script>
</body>
</html>
